<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/yoyoga.css" media="all"/>
    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script src="/layui/layui.js"></script>
</head>

<!--我的钱包页，取名失误-->

<body>
<div class="main-content-container" id="trainerInfo">

    <img src="/image/balance.png" width="150px">
    <div class="contract-detail-button">
        <span th:text="${balance}" style="font-size: xx-large">0.00</span>
    </div>

    <div class="contract-detail-button">
    <button class="layui-btn layui-btn-radius" onclick="recharge()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;充&nbsp;&nbsp;值&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
    </div>
    <div class="contract-detail-button">
        <button class="layui-btn layui-btn-primary layui-btn-radius" onclick="withdraw()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;&nbsp;现&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
    </div>

    <div class="contract-detail-container layui-tab">
        <ul class="layui-tab-title" style="width: 100%;">
            <li class="layui-this">账户流水</li>
        </ul>
        <div class="layui-tab-content"  style="width: 100%;">
            <div class="layui-tab-item layui-show" id="billList"></div>
        </div>
    </div>

</div>



<!--折叠面板-->
<script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
</script>

<!-- head -->
<script>
    layui.use('element', function() {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>


<script>
    function recharge(){
        var money = prompt("请输入充值金额","");
        if((Number)(money)>0){
            window.location.href="/pay/recharge?fee="+money;
        }else{
            alert("输入数据必须为正数")
        }
    }
    
    function withdraw() {
        var money = prompt("请输入提现金额","");
        var alipayAccount=prompt("请输入提现支付宝账号","tvqeyh7237@sandbox.com");
        var balance = [[${balance}]];
        if((Number)(money)>0&&Number(money)<=balance){
            re = /^(?:\w+\.?)*\w+@(?:\w+\.)+\w+|\d{9,11}$/;
            if(re.test(alipayAccount)){
                $.ajax({
                    url:"/pay/transfer?payee_account="+alipayAccount+"&money="+money,
                    success:function (data) {
                        alert("提现成功");
                        window.location.href="/user/toRechargePage";
                    }
                })
            }else{
                alert("支付宝账号格式有误！请检查")
            }
        }else{
            alert("提现金额必须大于0小于账户余额");
        }
    }

    //展示账单
    $(function () {
        layui.use('flow', function() {
            var flow = layui.flow;
            flow.load({
                elem: '#billList', //流加载容器
                done: function(page, next) { //执行下一页的回调
                    var lis = [];
                    $.ajax({
                        url:"/user/selectBills",
                        dataType:"json",
                        data:{
                            "page":page,
                        },
                        success:function(res){
                            layui.each(res.currentMessage,function (index, item) {
                                lis.push(
                                    '<div class="mytrainer-card">'
                                    +'<div class="mytrainer-card-left">'
                                    +'<div class="mytrainer-card-gym-trainer">'
                                    +'<p>账单类型:'+item+'</p>'
                                    +'</div>'
                                    +'<div class="mytrainer-card-gym-trainer">'
                                    +'账单时间产生时间：'+item
                                    +'</div>'
                                    +'<div class="mytrainer-card-gym-trainer">'
                                    +'账单金额'+item
                                    +'</div>'
                                    +'</div>'
                                    +'<div class="mytrainer-card-right">'
                                    +'<div>'+'？？？？'+'</div>'
                                    +'</div>'
                                    +'</div>'
                                )
                            });
                            next(lis.join(''), page < res.total);
                        }
                    })

                }
            });
        });
    })
</script>

</body>
</html>
